<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>监管等级</title>
<link href="${request.contextPath}/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/css/cb.css" rel="stylesheet" type="text/css" />
<link href="${request.contextPath}/css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="${request.contextPath}/js/laypage/skin/laypage.css" />
<script type="text/javascript" src="${request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="${request.contextPath}/js/vue/vue.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/laypage/laypage.js"></script>
<script type="text/javascript" src="${request.contextPath}/laydate/laydate.js"></script>
</head>
<div id="app">
<body>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/images/b2.jpg"><img
				src="${request.contextPath}/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/images/b2.jpg"><table width="124"
					border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">监管等级查询</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="${request.contextPath}/images/b2.jpg"><img
				src="${request.contextPath}/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
					<table width="80%" border="0" cellspacing="1" cellpadding="3">
						<tr>
							<td width="10%" align="right">矫正单位:</td>
							<td width="10%" align="left"><input name="unit" type="text"
								id="unit" size="15" /></td>
							<td width="10%" align="right">姓名:</td>
							<td width="10%" align="left"><input name="name" type="text"
								id="name" size="15" /></td>
							<td width="10%" align="left"><input type="submit"
								 value="查找"  id="querycheck" /></td>
							<td width="10%" colspan="2" align="right"><input
								type="button" onclick="addEvent()" name=""
								value="增加记录" /> <input type="button" onclick="outExcel()" name="" value="导出Excle" /></td>
						</tr>
					</table>
			</td>
		</tr>
	</table>

	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="${request.contextPath}/images/b2.jpg"><img
				src="${request.contextPath}/images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="${request.contextPath}/images/b2.jpg"><table width="124"
					border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="${request.contextPath}/images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">监管等级列表</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="${request.contextPath}/images/b2.jpg"><img
				src="${request.contextPath}/images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4">
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">矫正单位</td>
			<td align="center" bgcolor="#EFFBFE">姓名</td>
			<td align="center" bgcolor="#EFFBFE">监管等级</td>
			<td align="center" bgcolor="#EFFBFE">报到频率</td>
			<td align="center" bgcolor="#EFFBFE">思想汇报</td>
			<td align="center" bgcolor="#EFFBFE">管理操作</td>
		</tr>
		<tbody>
		<tr 
			v-for="(item,index) in result"
		    onmouseout="this.style.backgroundColor='#ffffff'"
			bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'">

			<td height="25" align="center"><input name="" value=""
				type="checkbox" />{{index+1}}</td>
			<td align="center" class="t5"><div align="center">
					<strong>{{item.jname}}</strong>
				</div></td>
			<td align="center">{{item.name}}</td>
			<td align="center">{{item.grade}}</td>
			<td align="center">{{item.frequency}}</td>
			<td align="center">{{item.report}}</td>
			<td align="left">
				<div align="left" style="padding-left: 5px">
					<div align="center">
						<input type="button" @click="checkEvent(item.id)" name="" value="查看" />
						<input type="button" @click="editEvent(item.id)" name="" value="修改" />
						<input type="button" @click="delEvent(item.id)" name="" value="删除" />
					</div>
				</div>
			</td>
		</tr>
		<tr>
					<td colspan="6" align="center">
						<div id="pagediv"></div>
					</td>
				</tr>
	
		</tbody>
		</table>
		<!-- 增加期满登记弹出框 -->
		<div id="dlg"></div>
		<!-- 查看期满登记弹出框 -->
		<div id="dlg1"></div>
		<!-- 修改期满登记弹出框 -->
		<div id="dlg2"></div>
	<!-- js代码控制增删改查弹出层 -->
	</div>
	<!-- js代码控制增删改查弹出层 -->
	<script>
	var app = new Vue({
	    el : '#app',
	    data : {
             result : []	    
	    }
	});
	
	//模糊查询
	var getPageList =function(curr){
		$.ajax({
			type :"Get",
			dataType :"json",
			url :"/grade/get",
			data : {
				pageNum : curr || 1,
				pageSize : 10,
				jname : $("#unit").val(),
				name : $("#name").val()
			},
			//显示分页
		success : function(msg) {
			app.result = msg.data[0].result;
			laypage({
				cont : 'pagediv', //容器。值支持id名、原生dom对象，jquery对象
				pages : msg.data[0].totalPage, //总页数
				first : "首页",
				last : "尾页",
				skip : true, //是否开启跳页
				skin : '#5675A2',
				curr : curr || 1, //当前页
				jump : function(obj, first) { //触发分页后的回调
					if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
						getPageList(obj.curr);
					}
				}
			});
		}
	});	
	}
	//获取列表
		getPageList();
   //模糊查询监管等级事件
   $('#querycheck').on('click',function(){
   getPageList();
   })
   //增加监管等级事件
	var addEvent = function() {
			$('#dlg').dialog({
				title : '增加--监管等级',
				width : 600,
				height : 400,
				closed : false,
				cache : false,
				href : '${request.contextPath}/grade/addSkip',
				modal : true,
				buttons : [ {
					text : '保存',
					iconCls : 'icon-ok',
					handler : function() {
						var addForm = new FormData($( "#form1" )[0]);
						$.ajax({
							type: 'POST',
							url : "${request.contextPath}/grade/add",
							data : addForm,
							async: false,  
					        cache: false,  
					        contentType: false,  
					        processData: false, 
							success : function(result) {
								$.messager.alert({
									title : '消息',
									msg : '增加成功!',
									icon : 'info'
								});
								getPageList();
								$('#dlg').dialog('close');
							}
						});
					}
				}, {
					text : '取消',
					handler : function() {
						$('#dlg').dialog('close');
					}
				}]
			});
		}
		
		//修改期满登记事件
		var editEvent = function(id) {
			$('#dlg2').dialog({
				title : '修改---监管等级',
				width : 600,
				height :400,
				closed : false,
				cache : false,
				href : '${request.contextPath}/grade/detail?id=' + id,
				modal : true,
				buttons : [ {
					text : '保存',
					iconCls : 'icon-ok',
					handler : function() {
						var editForm = new FormData($( "#form2" )[0]);
						$.ajax({
							type: 'POST',
							url : '${request.contextPath}/grade/edit',
							data : editForm,
							async: false,  
					        cache: false,  
					        contentType: false,  
					        processData: false,
							success : function(result) {
								$.messager.alert({
									title : '消息',
									msg : '修改成功!',
									icon : 'info'
								});
								getPageList();
								$('#dlg2').dialog('close');
							}
						});
					}
				}, {
					text : '取消',
					handler : function() {
						$('#dlg2').dialog('close');
					}
				} ]
			});
		}

		//查看监管等级详情事件
		var checkEvent = function(id) {	
			$('#dlg1').dialog({
				title : '查看---期满登记',
				width : 720,
				height : 450,
				closed : false,
				cache : false,
				href : '${request.contextPath}/grade/getidgrade?id=' + id,
				modal : true,
			});
		}

		//删除期满登记事件
		var delEvent = function(id) {
			$.extend($.messager.defaults,{
                ok:"确定",
                cancel:"取消"
            });
			$.messager.confirm('提示框', '你确定要删除吗?', function(res) {
				if (res) {
					$.ajax({
						url : "${request.contextPath}/grade/del",
						dataType : "json",
						data : {
							id : id
						},
						success : function(result) {
							$.messager.alert({
								title : '消息',
								msg : '删除成功!',
								icon : 'info'
							});
							getPageList();
						}
					});
				} else {

				}
			})
		}
		
		//导出Excel		
		function outExcel(){
	        var url = "${request.contextPath}/grade/excel";
	        window.open(url);
	    }
	</script>
	

</body>
</html>